<!-- 
    说明： 允许个人、团队队长编辑报名详情
 -->
<template>
  <section class="page">
    <pageCom>
        <div class="content-page">
            <div class="main">
                <div class="nav-com">
                    <el-breadcrumb
                    separator-class="el-icon-arrow-right"
                    style="margin-bottom: 20px"
                >
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ name: 'userCenter' }"
                    >用户中心</el-breadcrumb-item
                    >
                    <el-breadcrumb-item :to="{ name: 'checkProductDetail' }"
                    >报名项目</el-breadcrumb-item
                    >
                    <el-breadcrumb-item>
                    <span style="color: #3d6cb0">报名项目详情</span>
                    </el-breadcrumb-item>
                </el-breadcrumb>
                </div>
                <div class="base-info " v-if="info && info.title">
                    <div class="title">报名项目</div>
                <div class="product-info">
                    <div class="row-text">
                        <span>项目名称:</span> {{ info.title || '--' }}
                    </div>
                    <div class="row-text">
                        <span>比赛日期:</span> {{ info.startTime }} ~ {{ info.endTime }}
                    </div>
                    <div class="row-text">
                        <span>报名时间:</span> {{ info.entryTime || '--' }}
                    </div>
                    <div class="row-text">
                        <span>作品截止上传日期:</span> {{ info.closingDate || '--'}}
                    </div>
                </div>
                </div>
                <div class="join-product-info">
                    <!-- 报名类型;1:团队;2:个人 -->
                    <div v-if="Number(info.entryType) === 2">
                    <div class="personal-block">
                        <p class="personal-title">个人信息</p>
                        <el-row>
                        <el-col :span="12">
                            <div class="personal-text-row">
                            <div class="label">参赛者：</div>
                            <div class="value">{{ personalForm.teamName || '--' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="personal-text-row">
                            <div class="label">手机号：</div>
                            <div class="value">{{ currentStudentInfo.mobile || '--' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="personal-text-row">
                            <div class="label">学校：</div>
                            <div class="value">{{ currentStudentInfo.schoolName || '--' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="personal-text-row">
                            <div class="label">专业：</div>
                            <div class="value">{{ currentStudentInfo.major || '--' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="20">
                            <div class="personal-text-row">
                            <div class="label">个人介绍：</div>
                            <div class="right-box">
                                <el-input
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 6 }"
                                placeholder="请输入个人介绍（1-250字）"
                                v-model="personalForm.introduce"
                                maxlength="250"
                                >
                                </el-input>
                            </div>
                            </div>
                        </el-col>
                        </el-row>
                        <div class="upload-tips">
                        报名资料 <span>仅支持上传zip格式，仅上传一份文件</span>
                        </div>
                        <div>
                            <FileUpload v-if="!personalForm.annexName" :fileType="['zip']"  @success="handleAvatarSuccess">
                                <ComBtn>
                                上传资料
                                </ComBtn>
                            </FileUpload>
                            <div class="zip-show" v-else>
                                <img src="@/assets/images/productManage/zip.png" class="img" alt="">
                                <span class="file-name">{{ personalForm.annexName }}</span>
                                <span class="status">已上传</span>
                                <el-popconfirm
                                @confirm="delelteFile"
                                title="确定删除吗？"
                                >
                                <span slot="reference" class="delete-text">删除</span>
                                </el-popconfirm>
                                
                            </div>
                        </div>
                    </div>
                    </div>
                    <div v-else>
                    <div class="personal-block">
                        <el-form :model="teamForm" :rules="teamRules" ref="ruleForm"></el-form>
                            <p class="personal-title">团队信息</p>
                            <el-row>
                            <el-col :span="20">
                                <div class="personal-text-row">
                                <div class="label">团队名称：</div>
                                <div class="right-box">
                                    <el-input
                                    type="text"
                                    placeholder="请输团队名称（1-15字）"
                                    v-model="teamForm.teamName"
                                    >
                                    </el-input>
                                </div>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <div class="personal-text-row">
                                <div class="label">团队介绍：</div>
                                <div class="right-box">
                                    <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 6 }"
                                    placeholder="请输入团队介绍（1-250字）"
                                    v-model="teamForm.introduce"
                                    maxlength="250"
                                    >
                                    </el-input>
                                </div>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <div class="personal-text-row">
                                <div class="label">团队成员：</div>
                                <div class="right-option">
                                    <el-input
                                    class="left"
                                    type="text"
                                    placeholder="请输入手机号寻找团队成员"
                                    v-model="searchKey"
                                    >
                                    </el-input>
                                    <ComBtn title="添加成员" class="select-btn" @handleClick="searchStudent"></ComBtn>
                                </div>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <div class="personal-text-row">
                                <div class="label">参赛选手：</div>
                                <div class="right-table">
                                    <div class="table-view">
                                        <el-row>
                                            <el-col :span="2">
                                                <p class="text-col head">编号</p>
                                            </el-col>
                                            <el-col :span="3"> <p class="text-col head">类型</p></el-col>
                                            <el-col :span="3"> <p class="text-col head">姓名</p></el-col>
                                            <el-col :span="6"> <p class="text-col head">手机号</p></el-col>
                                            <el-col :span="6"> <p class="text-col head">学校</p></el-col>
                                            <el-col :span="4"> <p class="text-col head">专业</p></el-col>
                                        </el-row>
                                        <el-row v-for="(item, index) in teamForm.stuList" :key="index" style="position: relative;">
                                            <el-col :span="2">
                                                <p class="text-col">{{ index + 1 }}</p>
                                            </el-col>
                                            <el-col :span="3">
                                                <p class="text-col cursor-pointer">
                                                    {{ Number(item.jobType) === 1 ? '队长':'队员' }}
                                                </p>
                                            </el-col>
                                            <el-col :span="3">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.studentName"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.studentName }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.mobile"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.mobile }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.schoolName"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.schoolName }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="4">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.major"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.major }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <div v-if="Number(item.jobType) !== 1" @click="deleteRow(index)" class="delete-btn" style="position: absolute;cursor:pointer;width:25px;height:25px;right: -40px;top: 50%;transform: translateY(-50%);">
                                                <img src="@/assets/images/productManage/delete.png" style="display:block;width: 100%;height:100%;" alt="">
                                            </div>
                                        </el-row>
                                    </div>
                                </div>
                                </div>
                            </el-col>
                            </el-row>
                            <div class="upload-tips">
                            报名资料 <span>仅支持上传zip格式，仅上传一份文件</span>
                            </div>
                            <div>
                            <FileUpload v-if="!teamForm.annexName" :fileType="['zip']"  @success="handleAvatarSuccess">
                                <ComBtn>
                                上传资料
                                </ComBtn>
                            </FileUpload>
                            <div class="zip-show" v-else>
                                <img src="@/assets/images/productManage/zip.png" class="img" alt="">
                                <span class="file-name">{{ teamForm.annexName }}</span>
                                <span class="status">已上传</span>
                                <el-popconfirm
                                @confirm="delelteFile"
                                title="确定删除吗？"
                                >
                                <span slot="reference" class="delete-text">删除</span>
                                </el-popconfirm>
                                
                            </div>
                        </div>
                        </el-form>
                    </div>
                    </div>
                </div>
                <div class="btn-box">
                <ComBtn type="cancel" title="取消" style="margin-right: 15px;" @handleClick="$router.go(-1)" />
                <ComBtn title="确认" @handleClick="submitJoinForm" />
                </div>
            </div>
        </div>
    </pageCom>
  </section>
</template>

<script>
import vueVideoPlayer from "@/components/videoPlayer/videoPlayer.vue";
import ComBtn from "../productManage/components/commonBtn";
import moment from 'moment'
import pageCom from "@/components/page/index.vue";
import { checkPhone } from '@/utils/utils'
import FileUpload from '@/components/FileUpload'
import {
  getStudentEntryInfo,
  updateStudentEntry,
  getStudentInfoByMobile
} from "../../request/api";
export default {
  // 组件名称
  name: "productJoin",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {  ComBtn, vueVideoPlayer, pageCom, FileUpload },
  // 组件状态值
  data() {
    return {
      action:
        process.env.VUE_APP_BASE_API + "/app-api/student/web-student/upload",
      recommond: "",
      // 个人表单
      personalForm: {
        annexName: "",
        annexUrl: "",
        entryType: 2, // 报名类型;1:团队;2:个人
        projectId: '',
        introduce: '',// 介绍
        studentId: '', // 队长学生id
        teamName: '', // 个人报名，没有团队名，传学生名字
        stuList: [],
      },
      // 团队表单
      teamForm: {
        annexName: "",
        annexUrl: "",
        entryType: 1, // 报名类型;1:团队;2:个人
        projectId: '',
        introduce: '',// 介绍
        studentId: '', // 队长学生id
        teamName: '', // 个人报名，没有团队名，传学生名字
        stuList: [],
      },
      searchKey: '',
      teamRules: {
          annexUrl: [
            { required: true, message: '请上传报名资料', trigger: 'blur' },
          ],
          introduce: [
            { required: true, message: '请填写团队介绍', trigger: 'blur' }
          ],
          teamName: [
            { required: true, message: '请填写团队名称', trigger: 'blur' }
          ],
          stuList: [
            { required: true, message: '请选择队员', trigger: 'blur' }
          ]
      },
      // 报名类型;1:团队;2:个人
      entryTypeStr: {
        1: "个人",
        2: "团队",
      },
      tipsList: {
        1004053023: "该手机号未注册",
        1004053024: "该队员未身份认证，请先认证",
        1004053025: "该队员已个人/团队报名，无法再次参加",
      },
      // 项目id
      id: "",
      // 当前用户数据
      currentStudentInfo: {},
      // 项目详情数据
      info: {
        id: "",
        title: "",
        projectTypeId: "",
        holdUnitUrl: "",
        holdUnitName: null,
        projectDescription: "",
        entryType: "",// 报名类型;1:团队;2:个人
        itemPeopleNum: "",
        entryInformation: "",
        competitionRules: "",
        reviewRules: "",
        reviewRequire: "",
        entryRequire: "",
        projectRewards: "",
        videoUrl: "",
        competitionOrganization: "",
        annexDownType: "",
        status: "",
        weight: "",
        releaseTime: null,
        examineFlag: "",
        examineStatus: "",
        examineNotes: "",
        submitTime: "",
        examinePeople: null,
        examineTime: "",
        scheduleType: "",
        projectTypeName: null,
        annexVOList: [],
        scheduleVOList: [],
      },
    };
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      this.id = id;
      this.init();
    } else {
      this.$message.warning("数据不存在，请稍后重试");
      setTimeout(() => {
        this.$router.go(-1);
      }, 2000);
    }
  },
  // 组件方法
  methods: {
    deleteRow(index){
        this.teamForm.stuList.splice(index, 1)
    },
    getFileName(o){
        var pos=o.lastIndexOf('/');
        return o.substring(pos+1);  
    },
    handleAvatarSuccess({url, file}) {
        this.$message.success("资料上传成功～");
      // 报名类型;1:团队;2:个人
      if (Number(this.info.entryType) === 1) {
        this.teamForm.annexName = file.name;
        this.teamForm.annexUrl = url;
      } else {
        this.personalForm.annexName = file.name;
        this.personalForm.annexUrl = url;
      }
    },
    delelteFile() {
        // 报名类型;1:团队;2:个人
        if (Number(this.info.entryType) === 1) {
        this.teamForm.annexName = '';
        this.teamForm.annexUrl = '';
      } else {
        this.personalForm.annexName = '';
        this.personalForm.annexUrl = '';
      }
    },
    onError() {
        this.$message.warning("上传失败，请稍后重试");
    },
    async searchStudent() {
        let isPhone = checkPhone(this.searchKey)
        if (!isPhone) {
            this.$message.error('请输入正确的手机号码')
            return
        }
        const studentInfo = await this.getStudentInfoByPhone(this.searchKey)
        if(studentInfo !== null) {
            console.log('查询studentInfo>>>', studentInfo, this.teamForm.stuList)
            let hasStudent = this.teamForm.stuList.find(item => {
                return item.studentId === studentInfo.studentId
            })
            if (hasStudent) {
                this.$message.error('改队员已存在，请勿重复添加')
            } else {
                this.teamForm.stuList.push(studentInfo.data)
            }
        }
    },
    submitJoinForm() {
      console.log("提交页面");
      // 报名类型;1:团队;2:个人
      if (Number(this.info.entryType) === 2) { // 个人
        if (this.personalForm.introduce === "") {
            this.$message.warning("请填写个人简介～");
            return;
        }
        if (this.personalForm.annexName === "" || this.personalForm.annexUrl === "") {
            this.$message.warning("请上传报名资料～");
            return;
        }
        console.log('personalForm>>', this.personalForm)
        updateStudentEntry(this.personalForm).then((res) => {
            if(res.code === 0 ) {
                this.$message.success('编辑成功');
                this.$router.go(-1)
            } else {
                this.$message.error(res.msg);
            }
        });
      } else { // 团队
        if (this.teamForm.teamName === "") {
            this.$message.warning("请填写团队名称～");
            return;
        }
        if (this.teamForm.introduce === "") {
            this.$message.warning("请填写团队介绍～");
            return;
        }
        if (this.teamForm.annexName === "" || this.teamForm.annexUrl === "") {
            this.$message.warning("请上传报名资料～");
            return;
        }
        const teamMaster = this.teamForm.stuList.find(item => Number(item.jobType) === 1)
        const param = {
            annexName: this.teamForm.annexName,
            annexUrl: this.teamForm.annexUrl,
            entryType: 1, // 报名类型;1:团队;2:个人
            projectId: this.teamForm.projectId,
            id: this.id,
            introduce: this.teamForm.introduce,// 介绍
            studentId: teamMaster.studentId, // 队长学生id
            teamName: this.teamForm.teamName, // 个人报名，没有团队名，传学生名字
            stuList: this.teamForm.stuList,
        }
        updateStudentEntry(param).then((res) => {
            if(res.code === 0 ) {
                this.$message.success('报名成功');
                this.$router.replace({name:'productList'})
            } else {
                this.$message.error(res.msg);
            }
        });
      }
    },
    getHightestEducation(educationalExperience) {
        if (Array.isArray(educationalExperience) && educationalExperience.length) {
            const educationRank ={
                '博士': 0,
                '硕士': 1,
                '本科': 2,
                '大专': 3,
                '不限': 4
            }
            const theHighterEducation = educationalExperience.sort((a, b) => {
                return educationRank[a.educationalBackground] - educationRank[b.educationalBackground]
            })
            return theHighterEducation[0]
        } else {
            return null
        }   
    },
    // 手机号获取学生报名数据
    getStudentInfoByPhone(phone) {
      return new Promise((resolve, reject) => {
        getStudentInfoByMobile({
            projectId: this.id,
            mobile: phone,
        }).then((res) => {
            if (
                res.data.code &&
                 [1004053023, 1004053024, 1004053025].indexOf(Number(res.data.code)) > -1
            ) {
                // 状态异常，无法报名
                this.$message.warning(this.tipsList[res.data.code]);
                reject(null)
            } else if (res.code === 0 && res.data) {
                let userInfo = res.data;
                // 从所有简历中，拿到最高学历，用于报名
                let educationInfo = this.getHightestEducation(userInfo.educationalExperience)
                let studentInfo = {
                    birthday: moment(userInfo.birthday).format('yyyy-MM-DD HH:mm:ss'),
                    currentCapacity: userInfo.political, // 政治身份
                    education: educationInfo.educationalBackground,
                    grade: educationInfo.grade,
                    jobType: 2 , // 职位类型;1:队长;2:队员
                    major: educationInfo.major,
                    mobile: phone,
                    projectId: this.id,
                    schoolName: educationInfo.schoolName,
                    studentId: userInfo.studentId,
                    studentName: userInfo.studentName,
                    educationInfo
                }
                resolve({
                    data: studentInfo,
                })
            }
        });
      })
    },
    initForm () {
        // 报名类型;1:团队;2:个人
        if (Number(this.info.entryType) === 2) {
            this.personalForm = {
                annexName: this.info.annexName,
                annexUrl: this.info.annexUrl,
                entryType: 2, // 报名类型;1:团队;2:个人
                id: this.id,
                projectId: this.info.projectId,
                introduce: this.info.introduce,// 介绍
                studentId: this.info.studentId, // 队长学生id
                teamName: this.info.teamName, // 个人报名，没有团队名，传学生名字
                stuList: [],
            }
            this.$set(this.personalForm, 'stuList', this.info.stuList)
        } else {
            this.teamForm = {
                annexName: this.info.annexName,
                annexUrl: this.info.annexUrl,
                entryType: 1, // 报名类型;1:团队;2:个人
                id: this.id,
                projectId: this.info.projectId,
                introduce: this.info.introduce,// 介绍
                studentId: this.info.studentId, // 队长学生id
                teamName: this.info.teamName, // 个人报名，没有团队名，传学生名字
                stuList: [],
            }
            this.$set(this.teamForm, 'stuList', this.info.stuList)
        }
    },
    async init() {
      let params = {
        id: this.id,
      };
      // 获取报名详情
      getStudentEntryInfo(params).then((res) => {
        console.log("项目详情>>>", res);
        if (res.code === 0 && res.data) {
          this.info = res.data;
          // 报名类型;1:团队;2:个人
          if(Number(this.info.entryType) === 2 && Array.isArray(this.info.stuList) && this.info.stuList.length) {
            this.currentStudentInfo = this.info.stuList[0]
          }
          this.initForm()
        }
        });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f8fa;
  .bottom-line {
    border-bottom: 1px solid #eaeaea;
  }
  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    .banner {
      position: relative;
      width: 100%;
      height: 220px;
      .banner-bg {
        position: relative;
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
      .banner-text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translate3d(0, -50%, 0);
        font-size: 38px;
        font-family: "PingFangSC-Light, PingFang SC";
        font-weight: 300;
        color: #ffffff;
        line-height: 53px;
      }
    }
    .main {
      background: #fff;
      width: 1200px;
      margin: 15px auto 0;
      padding: 23px 30px;
      min-height: 500px;
    }
    .base-info {
      position: relative;
      .title {
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 21px;
      }
      .description {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 31px;
        margin-bottom: 20px;
      }
      .product-info {
        position: relative;
        background: #F9F9F9;
        border-radius: 6px;
        border: 1px solid #F0F0F0;
        padding: 30px 20px;
        margin-bottom: 35px;
        .row-text {
            position: relative;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597A0;
            line-height: 25px;
            margin: 15px 0;
        }
    }
    }
    
    .join-product-info {
      padding: 25px 0 40px;
      .title {
        font-size: 25px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 36px;
        margin-bottom: 28px;
      }
    }
    .top-info-block {
      padding: 35px 0;
      .personal-info-row {
        line-height: 40px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        .label {
          margin-right: 14px;
        }
        .value {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 40px;
        }
      }
    }
    .personal-block {
      position: relative;
      .personal-title {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 28px;
        margin-bottom: 38px;
      }
      .personal-text-row {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        margin-bottom: 20px;
        .label {
          width: 140px;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 25px;
        }
        .value {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 25px;
        }
        .right-box {
          flex: 1;
        }
        .right-option {
            flex: 1;
            display: flex;
            .left {
                margin-right: 15px;
            }
            .select-btn {
                height: 40px;
                line-height: 40px;
                font-size: 15px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                width: 135px;
                padding: 0;
                text-align: center;
            }
        }
      }
      .right-table {
        flex :1 ;
      }
      .table-view {
        width: 100%;
        background: #ffffff;
        border-top: 1px solid #d4d6da;
        border-left: 1px solid #d4d6da;
        .text-col {
            border-right: 1px solid #d4d6da;
            border-bottom: 1px solid #d4d6da;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 40px;
            text-align: center;
            width: 100%;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 5px;
        }
        .cursor-pointer {
            cursor: pointer;
        }
        .head {
            background: #f6f7f8;
        }
        .href-link {
            cursor: pointer;
            color: #3d6cb0;
        }
    }
    .zip-show {
        position: relative;
        width: 100%;
        height: 60px;
        border: 1px dashed #D4D6DA;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
        .img {
            width: 25px;
            height: 25px;
            margin-right: 15px;
        }
        .file-name {
            max-width: 50%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383D;
            line-height: 60px;
            margin-right: 12px;
        }
        .status {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #C4C4C4;
            line-height: 60px;
        }
        .delete-text {
            position: absolute;
            top: 0;
            right: 15px;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FA606A;
            cursor: pointer;
        }
    }
    }
    .upload-tips {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 28px;
      margin-bottom: 25px;
      span {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c4c4c4;
        line-height: 21px;
        margin-left: 15px;
      }
    }
    .btn-box {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      margin-top: 60px;
    }
  }
}
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
/deep/ .el-tabs__item {
  height: 48px;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9597a0;
  line-height: 48px;
}
/deep/ .el-tabs__item.is-active {
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #3d6cb0;
  line-height: 48px;
}
</style>
